<script setup lang="ts">
interface UserInfo {
  nickname: string
  avatar: string
  bio: string
  phone: string
}

interface MenuItem {
  icon: string
  text: string
  action?: () => void
  color?: string
}

const userInfo = ref<UserInfo>({
  nickname: '用户名示例',
  avatar: '',
  bio: '这是一段个人简介，保持简洁。',
  phone: '138****1234',
})

const menuItems: MenuItem[] = [
  {
    icon: 'i-carbon-settings',
    text: '设置',
    action: () => handleMenuClick({ text: '设置' }),
  },
]

const onLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: res => {
      if (res.confirm) {
        uni.showToast({ title: '已退出', icon: 'none' })
      }
    },
  })
}

const handleMenuClick = (item: { text: string }) => {
  uni.showToast({ title: `点击了 ${item.text}`, icon: 'none' })
}
</script>

<template>
  <view class="min-h-screen bg-black text-gray-300 my-page-dark">
    <!-- 内容区域 -->
    <scroll-view scroll-y class="h-[calc(100vh-var(--status-bar-height))] content-scroll-dark">
      <!-- 用户信息卡片 -->
      <view class="m-4 p-5 rounded-xl bg-[#1f1f1f] shadow-lg user-profile-dark">
        <view class="flex items-center mb-4">
          <view
            class="w-16 h-16 mr-4 flex items-center justify-center rounded-full bg-gray-700 overflow-hidden avatar"
          >
            <image v-if="userInfo.avatar" :src="userInfo.avatar" class="w-full h-full" />
            <text v-else class="i-carbon-user text-3xl text-gray-400" />
          </view>
          <view class="flex-1">
            <text class="block text-lg font-semibold text-white nickname">
              {{ userInfo.nickname }}
            </text>
            <text class="block text-sm text-gray-500 userid">{{ userInfo.phone }}</text>
          </view>
        </view>

        <view class="mb-4 text-sm text-gray-400 bio">
          <text>{{ userInfo.bio }}</text>
        </view>
      </view>

      <!-- 功能菜单列表 -->
      <view class="mx-4 mb-4 rounded-xl bg-[#1f1f1f] shadow-lg overflow-hidden menu-list-dark">
        <view
          v-for="(item, index) in menuItems"
          :key="index"
          class="flex items-center justify-between px-4 h-14 menu-item-dark"
          :class="{ 'border-b border-white/10': index < menuItems.length - 1 }"
          hover-class="bg-white/5"
          @click="item.action ? item.action() : handleMenuClick(item)"
        >
          <view class="flex items-center item-content">
            <text
              :class="[item.icon, item.color ? item.color : 'text-gray-400', 'text-xl mr-3 icon']"
            />
            <text class="text-sm text-gray-200 item-text">{{ item.text }}</text>
          </view>
          <text class="i-carbon-chevron-right text-gray-600" />
        </view>
      </view>

      <!-- 退出登录 -->
      <view class="px-4 pb-4 logout-dark">
        <button
          class="w-full h-11 flex items-center justify-center rounded-lg bg-[#1f1f1f] text-red-500 text-sm shadow-lg logout-button-dark"
          hover-class="bg-white/5"
          @click="onLogout"
        >
          退出登录
        </button>
      </view>

      <!-- 底部安全区域 -->
      <view class="h-[var(--safe-area-inset-bottom)]" />
    </scroll-view>
  </view>
</template>

<style lang="scss">
.my-page-dark {
  .content-scroll-dark {
    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: #444;
      border-radius: 2px;
    }

    &::-webkit-scrollbar-track {
      background: #1a1a1a;
    }
  }

  .user-profile-dark {
    border: 1px solid rgb(255 255 255 / 5%);
    box-shadow: 0 5px 15px rgb(0 0 0 / 30%);

    .avatar {
      image {
        object-fit: cover;
      }
    }
  }

  .menu-list-dark {
    border: 1px solid rgb(255 255 255 / 5%);
    box-shadow: 0 5px 15px rgb(0 0 0 / 30%);

    .menu-item-dark {
      &:last-child {
        border-bottom: none;
      }
    }
  }

  .logout-dark {
    .logout-button-dark {
      border: 1px solid rgb(255 255 255 / 5%);
      box-shadow: 0 5px 15px rgb(0 0 0 / 30%);

      &:active {
        background-color: #2a2a2a;
      }

      &::after {
        border: none;
      }
    }
  }
}
</style>
